<i18n>
{
  "en": {
    "page_title": "User Management",

    "unrelease": "Unrelease",
    "released": "Released",
    "all": "All",

    "headquarter": "Headquarter",
    "district": "District",
    "view": "View",
    "maintain": "Maintain",
    "move": "Move",
    "import": "Import",
    "optional_import": "Optional Import",
    "reuse": "Select Resue",
    "batch_publish": "Batch Publish",

    "col_inmodel": "Internal Model",
    "col_outmodel": "External model",
    "col_fourthLnName": "Main model",
    "col_prodName": "Product Name",
    "col_productStatus": "Product State",
    "col_salesStatus": "Sales state",
    "col_recommendedLevel": "Recommand level",
    "col_headPromotion": "Headquarter Promotion",
    "col_promotionFlag": "Promotion",
    "col_stock": "stock",
    "col_releaseStatus": "Release State",
    "col_headquarter_products_detail": "Headquarter products detail",
    "col_updateUser": "Update User",

    "col_networkModel": "Official Website model",
    "col_secondLnName": "Product line",
    "col_recommand": "Recommand(Y/N)",
    "col_official_website": "Official Website",
    "col_district_model": "District model"

  },
  "zh": {
    "page_title": "用户管理",

    "unrelease": "待维护",
    "released": "已发布",
    "all": "所有",

    "headquarter": "总部",
    "district": "区域",
    "view": "查看",
    "maintain": "维护",
    "move": "移动",
    "import": "批量导入",
    "optional_import": "选配导入",
    "reuse": "复用",
    "batch_publish": "批量发布",

    "col_inmodel": "内部型号",
    "col_outmodel": "外部型号",
    "xol_x_List": "系列",
    "col_fourthLnName": "主型号",
    "col_prodName": "产品名称",
    "col_productStatus": "产品状态",
    "col_salesStatus": "销售状态",
    "col_recommendedLevel": "产品星级别",
    "col_headPromotion": "总部促销",
    "col_promotionFlag": "是否促销",
    "col_stock": "库存",
    "col_salesType": "销售类型",
    "col_releaseStatus": "发布状态",
    "col_headquarter_products_detail": "总部发布详情",
    "col_updateUser": "操作者",

    "col_networkModel": "官网model",
    "col_secondLnName": "所属产品线",
    "col_recommand": "推荐产品",
    "col_official_website": "是否推送官网",
    "col_district_model": "所属区域"
  }
}
</i18n>

<template>
<div v-loading="dataListLoading">

    <div class="page-header">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="10">
        <el-form :inline="true" :disabled="editingColumn">
          <!-- <el-form-item label="区域/国家" >
            <el-select v-model="area" @change="areaChanged" :style="{width: '100px'}">
              <el-option label="总部" :value="0"></el-option>
              <el-option label="区域" :value="1"></el-option>
            </el-select>

            <el-select v-if="area === 1" v-model="contury" :style="{'min-width': '100px'}" placeholder="请选择国家">
              <el-option label="中国" :value="0"></el-option>
              <el-option label="美国" :value="1"></el-option>
            </el-select>
          </el-form-item> -->

          <el-cascader
          :style="{'min-width': '300px', 'margin-bottom': '10px'}"
            :options="areaContryOptions"
            :props="{
              children: 'childList',
              value: 'code'
            }"
            v-model="areaCode"
            @change="areaChanged">
          </el-cascader>
        </el-form>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="14" class="text-right actions">
        <el-button :disabled="editingColumn" type="danger" @click="move">{{$t('move')}}</el-button>
        <el-button :disabled="editingColumn" type="primary" @click="doImport('batch_import')">{{'产品列表导入'}}</el-button>
        <el-button :disabled="editingColumn" type="primary" @click="doImport('optional_import')">{{'选配关系导入'}}</el-button>
        <el-button :disabled="editingColumn" type="primary" @click="batchPublish">{{$t('batch_publish')}}</el-button>
        <el-button :disabled="editingColumn" type="primary" @click="batchStop">{{$t('批量停售')}}</el-button>
        <el-button :disabled="editingColumn" type="primary">导出</el-button>
      </el-col>
    </el-row>
  </div>

  <el-card class="table-container" :key="areaCode" >
    <SearchForm @doSearch="doSearch" :disabled="editingColumn"/>

    <el-table
      @selection-change="handleSelectionChange"
     row-class-name="editable-data-row"
      :data="dataList"

      border style="width: 100%">
      <el-table-column
        fixed
        type="selection"
        width="55" label-class-name="text-center" class-name="text-center">
      </el-table-column>

      <template v-if="isHeadquarter">
        <!-- 总部显示字段 -->

        <el-table-column fixed min-width="100" :label="$t('col_fourthLnName')">
          <template slot-scope="scope">
            <a href="/" class="link-bottom text-info" @click.prevent="view(scope.row)">{{ scope.row.fourthLnName }}</a>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="networkModel" :label="$t('col_networkModel')">
        </el-table-column>
        <el-table-column  min-width="100" prop="inmodel" :label="$t('col_inmodel')">

        </el-table-column>
        <el-table-column  min-width="100" prop="outmodel" :label="$t('col_outmodel')">
        </el-table-column>

        <el-table-column  min-width="100" prop="prodName" :label="$t('col_prodName')">
        </el-table-column>

        <el-table-column min-width="100" prop="secondLnName" :label="$t('col_secondLnName')">
        </el-table-column>

        <el-table-column :fixed="editingColumn" min-width="150" class-name="text-center" header-align="center" prop="recommendedLevel" :label="$t('col_recommendedLevel')">
          <template slot-scope="scope">
            <el-rate
              :disabled="!scope.row.editable"
              v-model="scope.row.recommendedLevel"
              text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>

        <el-table-column min-width="100" class-name="text-center" header-align="center" prop="stock" :label="$t('col_stock')">
        </el-table-column>

        <el-table-column min-width="100" class-name="text-center" header-align="center" prop="salesType" :label="$t('col_salesType')">
        </el-table-column>

        <el-table-column min-width="100" prop="productStatus" :label="$t('col_productStatus')">
        </el-table-column>
        <el-table-column min-width="100" prop="salesStatus" :label="$t('col_salesStatus')">
        </el-table-column>

        <el-table-column min-width="100" prop="releaseStatus" :label="$t('col_releaseStatus')">
        </el-table-column>

        <el-table-column min-width="80" prop="official_website" :label="$t('col_official_website')">
        </el-table-column>

        <el-table-column min-width="80" prop="promotionFlag" :label="$t('col_promotionFlag')">
        </el-table-column>

        <el-table-column prop="updateUser" :label="$t('col_updateUser')">
        </el-table-column>

        <el-table-column fixed="right" label-class-name="text-center" class-name="text-center action" :label="$t('common.operation')"
          width="150">
          <template slot-scope="scope">

            <span v-if="scope.row.editable">
              <el-button type="text" class="text-info" @click.prevent="() => saveRow(scope.row)">{{$t('common.save')}}</el-button>
              <el-button type="text" class="text-info" @click.prevent="() => cancelRow(scope.row)">{{$t('common.cancel')}}</el-button>
            </span>
            <span v-else>
              <el-button v-if="!isHeadquarter" type="text" :disabled="editingColumn" class="text-info" @click.prevent="editRow(scope.row)">{{$t('common.edit')}}</el-button>
              <el-button type="text" :disabled="editingColumn" class="text-info" @click.prevent="reuse(scope.row)">{{$t('reuse')}}</el-button>
              <el-button type="text" :disabled="editingColumn" class="text-info" @click.prevent="update(scope.row)">{{$t('maintain')}}</el-button>

            </span>

          </template>
        </el-table-column>
      </template>
      <template v-else>
        <!-- 区域显示字段 -->
        <el-table-column :fixed="!editingColumn" min-width="100" :label="$t('col_inmodel')">
          <template slot-scope="scope">
            <a href="/" class="link-bottom text-info" @click.prevent="view(scope.row)">{{ scope.row.inmodel }}</a>
          </template>
        </el-table-column>
        <el-table-column :fixed="editingColumn" min-width="150" :label="$t('col_outmodel')">
          <template slot-scope="scope">
            <div>
              <el-input
                size="mini"
                v-model="scope.row.outmodel"
                v-if="scope.row.editable"
              />
              <template v-else>{{scope.row.outmodel}}</template>
            </div>
          </template>

        </el-table-column>
        <el-table-column :fixed="editingColumn" min-width="150" :label="$t('产品系列')">
          <template slot-scope="scope">
            <div>
              <el-input
                size="mini"
                v-model="scope.row.thirdLnName"
                v-if="scope.row.editable"
              />
              <template v-else>{{scope.row.thirdLnName}}</template>
            </div>
          </template>

        </el-table-column>
        <el-table-column  min-width="150" prop="prodName" :label="$t('col_prodName')">
        </el-table-column>
        <el-table-column :fixed="editingColumn" min-width="100" :label="$t('销售类型')">
          <template slot-scope="scope">
            <div>
              <el-select v-model="scope.row.salesType" placeholder="请选择" size="mini"
                v-if="scope.row.editable">
                <el-option v-for="item in productSalesTypes"
                :label="item.cnName"
                :value="item.code"
                :key="item.id"></el-option>
              </el-select>
              <template v-else>{{scope.row.salesTypeName}}</template>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="productStatus" :label="$t('col_productStatus')">
        </el-table-column>
        <el-table-column :fixed="editingColumn" min-width="100" prop="salesStatus" :label="$t('col_salesStatus')">
          <template slot-scope="scope">
            <div>
              <el-select v-model="scope.row.salesStatus" placeholder="请选择" size="mini"
                v-if="scope.row.editable">
                <el-option v-for="item in productSalesStatusTypes"
                :label="item.cnName"
                :value="item.code"
                :key="item.id"></el-option>
              </el-select>
              <template v-else>{{scope.row.salesStatusName}}</template>
            </div>
          </template>
        </el-table-column>
        <el-table-column :fixed="editingColumn" min-width="150" class-name="text-center" header-align="center" prop="recommendedLevel" :label="$t('col_recommendedLevel')">
          <template slot-scope="scope">
            <el-rate
              :disabled="!scope.row.editable"
              v-model="scope.row.recommendedLevel"
              text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column min-width="80" prop="headPromotion" :label="$t('col_headPromotion')">
        </el-table-column>
        <el-table-column :fixed="editingColumn" min-width="100" prop="promotionFlag" :label="$t('col_promotionFlag')">
          <template slot-scope="scope">
            <div>
              <el-select v-model="scope.row.promotionFlag" placeholder="请选择" size="mini"
                v-if="scope.row.editable">
                <el-option v-for="item in productIsPromotionTypes"
                :label="item.cnName"
                :value="item.code"
                :key="item.id"></el-option>
              </el-select>
              <template v-else>{{scope.row.promotionFlagName}}</template>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="100" class-name="text-center" header-align="center" prop="stock" :label="$t('col_stock')">
        </el-table-column>
        <el-table-column min-width="100" class-name="text-center" header-align="center" prop="upcCode" :label="$t('upcCode')">
        </el-table-column>
        <el-table-column min-width="100" prop="releaseStatus" :label="$t('col_releaseStatus')">
        </el-table-column>
        <el-table-column prop="updateUser" :label="$t('col_updateUser')">
        </el-table-column>

        <el-table-column fixed="right" label-class-name="text-center" class-name="text-center action" :label="$t('common.operation')"
          :width="250">
          <template slot-scope="scope">
            <span v-if="scope.row.editable">
              <el-button type="text" class="text-info" @click.prevent="() => saveRow(scope.row)">{{$t('common.save')}}</el-button>
              <el-button type="text" class="text-info" @click.prevent="() => cancelRow(scope.row)">{{$t('common.cancel')}}</el-button>
            </span>
            <span v-else>
              <el-button type="text" :disabled="editingColumn" class="text-info" @click.prevent="editRow(scope.row)">{{$t('common.edit')}}</el-button>
              <el-button type="text" :disabled="editingColumn" class="text-info" @click.prevent="reuse(scope.row)">{{$t('reuse')}}</el-button>
              <el-button type="text" :disabled="editingColumn" class="text-info" @click.prevent="update(scope.row)">{{$t('maintain')}}</el-button>
              <el-button type="text" :disabled="editingColumn" class="text-info" @click.prevent="update(scope.row)">{{$t('col_headquarter_products_detail')}}</el-button>
            </span>

          </template>
        </el-table-column>
      </template>

    </el-table>
    <el-pagination
      :disabled="editingColumn"
      :current-page="currentPage"
      :page-size="pageSize" layout="total, prev, pager, next, jumper"
      :total="totalPage"
      @current-change="onCurrentChange">
    </el-pagination>
  </el-card>


  <!--:title="'复用'"-->
  <el-dialog
    class="reuse-dialog"
    :key="reuseDialogKey"
    :title="'选择复用'"
    :close-on-click-modal="false"
    :visible.sync="reuseVisible"
    top='30px'
    width='80%'
    @close="onCloseReuse">
      <Resue />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click.prevent="reuseOk">{{$t('common.ok')}}</el-button>
      <el-button type='danger' @click="reuseVisible = false">{{$t('common.cancel')}}</el-button>
    </span>
  </el-dialog>

  <!-- 导入 -->
  <el-dialog
    class="import-dialog"
    :title="currentImport.title"
    :close-on-click-modal="false"
    :visible.sync="importVisible"
    width='40%'>
      <Import :data="currentImport"/>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click.prevent="importVisible = false">{{$t('common.ok')}}</el-button>
      <el-button type='danger' @click="importVisible = false">{{$t('common.cancel')}}</el-button>
    </span>
  </el-dialog>

  <!-- 导入 -->
  <el-dialog
    :title="'移动'"
    :key="moveVisible"
    :close-on-click-modal="false"
    :visible.sync="moveVisible"
    width='40%'>
      <Move :products="selectedRows" @target="moveTargetChanged"/>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click.prevent="moveOK">{{$t('common.ok')}}</el-button>
      <el-button type='danger' @click="moveVisible = false">{{$t('common.cancel')}}</el-button>
    </span>
  </el-dialog>

</div>

</template>

<script>
  import { TYPE, getTypeList } from '@/api/common'
  import EditableInputCell from '@/components/editable-cell/input'
  import EditableSelectCell from '@/components/editable-cell/select'
  import Import from '../import'
  import Move from './move'
  import SearchForm from './searchForm'
  import Resue from './reuse'
  const HEAD_QUARTER = 'HQ,HQ'
  let MockProductStateOptions= [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '1',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]

  export default {
    data() {
      return {
        contury: 0,
        status: 1,

        areaCode: [],

        areaContryOptions: [],

        notPublished: false,

        selectedRows: [],
        conformDeleteVisible: false,
        editingColumn: false,


        ProductStateOptions: MockProductStateOptions,

        // 复用dialog
        reuseDialogKey: Date.now(), // 用于重置表单
        reuseVisible: false,


        // 移动dialog
        moveVisible: false,
        targetProductDirectoryId: null,

        // 导入dialog

        importVisible:false,
        currentImport: {},

        batch_import: {
          title: '批量导入',
          type: 'batch_import',
          template: 'http://cslibrary.stanford.edu/102/PointersAndMemory.pdf'
        },
        optional_import: {
          title: '选配导入',
          type: 'optional_import',
          template: 'http://cslibrary.stanford.edu/102/PointersAndMemory.pdf'
        },

        currentTab: 'todo',

        // 查询表单
        searchForm: {
          productDirectoryId: this.$route.query.productDirectoryId,
          releaseStatus: '', // all
        },

        // 表格加载状态
        dataListLoading: false,
        // 表格数据
        dataList: [],
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,

        productSalesTypes: [],
        productSalesStatusTypes: []
      };
    },
    watch: {
      '$route': {
        handler: 'doSearch',
        immediate: true
      }
    },
    components: {
      EditableInputCell,
      EditableSelectCell,
      Import,
      Move,
      SearchForm,
      Resue
    },
    created() {
      this.getAreaCountries();
      this.getProductSalesTypeDataList()
      this.getProductSalesStatusTypeDataList()
      this.getProductIsPromotionTypes()
    },
    computed: {
      // 是否为总部
        isHeadquarter() {
          let areaCode = this.areaCode
           areaCode = areaCode.toString().toUpperCase();
        return areaCode === HEAD_QUARTER
        }
    },
    methods: {
      doSearch() {
        let defaultSearchForm = {
          releaseStatus: '', // all
        }
        this.searchForm = {...defaultSearchForm, ...this.$route.query}
        if (this.searchForm.productDirectoryId) {
          this.getDataList()
        } else {
          this.dataList = []
          this.totalPage = 0
        }

      },

      // 获取是否促销列表
      getProductIsPromotionTypes () {
        // this.productPublishStatusTypesLoading = true

        getTypeList(TYPE.IS_PROMOTION_TYPE).then((data) => {
          if (data && data.code === 0) {
            this.productIsPromotionTypes = data.cpqSystemConfig
          } else {
            this.productIsPromotionTypes = []
          }
          // this.productPublishStatusTypesLoading = false
        }).catch(error => {
          // this.productPublishStatusTypesLoading = false
        })
      },

      // 获取销售类型列表
      getProductSalesTypeDataList () {
        // this.productPublishStatusTypesLoading = true

        getTypeList(TYPE.SALES_TYPE).then((data) => {

          if (data && data.code === 0) {
            this.productSalesTypes = data.cpqSystemConfig
          } else {
            this.productSalesTypes = []
          }
          // this.productPublishStatusTypesLoading = false
        }).catch(error => {
          // this.productPublishStatusTypesLoading = false
        })
      },
      // 获取销售状态列表
      getProductSalesStatusTypeDataList () {
        // this.productPublishStatusTypesLoading = true

        getTypeList(TYPE.SALES_STATUS_TYPE).then((data) => {
          if (data && data.code === 0) {
            this.productSalesStatusTypes = data.cpqSystemConfig
          } else {
            this.productSalesStatusTypes = []
          }
          // this.productPublishStatusTypesLoading = false
        }).catch(error => {
          // this.productPublishStatusTypesLoading = false
        })
      },
      // 获取数据列表
      getAreaCountries () {
        this.areaCountryLoading = true

        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-sys/api/sysArea/queryAllAreaAndCountryTree'),
          method: 'post'
        }).then((data) => {
          if (data && data.code === 0) {

            let areaContryOptions = data.data || [];

            this.areaContryOptions = areaContryOptions;
            this.areaCode = [] // todo: default code list
          } else {
            this.areaCode = []
            this.areaContryOptions = []
          }
          this.areaCountryLoading = false
        })
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true

        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/product/productinformation/queryProductInformationListZb'),
          method: 'post',
          data: this.$http.adornParams({
            ...this.searchForm,
            'pageNo': this.currentPage - 1,
            'pageSize': this.pageSize,
          })
        }).then((data) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      areaChanged(value) {
        // debugger
        // let v = value || ''
        // v = v.toString().toUpperCase();
        // this.isHeadquarter = v === HEAD_QUARTER
        getDataList()
      },
      // 产品批量发布
      batchPublish() {
        if (this.selectedRows.length === 0) {
          this.$message({
            message: '请选择要发布的产品！',
            type: 'warning'
          });
          return;
        }

        this.dataListLoading = true

        let ids = this.selectedRows.map(x=>x.id)

        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-sys/product/productinformation/releaseAllProductInformation'),
          method: 'post',
          data: this.$http.adornParams({
            productInfoIdList: ids
          })
        }).then((data) => {
          this.dataListLoading = false
          if (data && data.code === 0) {

            this.$prompt('XX产品分类已发布XXX，XXX型号的产品，请您及时处理！', '产品发布成功', {
              confirmButtonText: '确定',
              confirmButtonClass: 'el-button--danger',
              closeOnClickModal: false,
              closeOnPressEscape: false,
              showClose: false,
              showCancelButton: false,
              beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                  done();
                }
              }
            }).then(({ value }) => {
              this.getDataList()
            })

          } else {
            this.$message({
              message: '发布失败',
              type: 'warning'
            });
          }

        })
      },
      // 产品批量停售
      batchStop() {
        if (this.selectedRows.length === 0) {
          this.$message({
            message: '请选择要停售的产品！',
            type: 'warning'
          });
          return;
        }

        this.dataListLoading = true

        let ids = this.selectedRows.map(x=>x.id)

        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-sys/product/productinformation/stopAllProductInformation'),
          method: 'post',
          data: this.$http.adornParams({
            productInfoIdList: ids
          })
        }).then((data) => {
          this.dataListLoading = false
          if (data && data.code === 0) {

            this.$message({
              message: '停售成功',
              type: 'success'
            });
            this.getDataList()

          } else {
            this.$message({
              message: '发布失败',
              type: 'warning'
            });
          }

        })
      },
      handleSelectionChange(val) {
        this.selectedRows = val;
      },
      moveTargetChanged(targetProductDirectoryId) {
        this.targetProductDirectoryId = targetProductDirectoryId
      },
      moveOK () {
        if (this.targetProductDirectoryId) {

          let sourceProductDirectoryId = this.$route.query.productDirectoryId;
          if (this.targetProductDirectoryId === sourceProductDirectoryId) {
            this.$message({
              message: '不能移动到同一目录下！',
              type: 'warning'
            });
            return;
          }

          let pIdList = this.selectedRows.map(r => r.id)
          this.dataMovingLoading = true
          // todo: ajax call
          this.$http({
            url: this.$http.adornUrl('/prm-os-srv-prod/product/productinformation/moveALLProductInformation'),
            method: 'post',
            data: this.$http.adornParams({
              productDirectoryId: this.targetProductDirectoryId,
              pIdList: pIdList
            })
          }).then((data) => {

            this.dataMovingLoading = false

            if (data && data.code === 0) {
              this.moveVisible = false
              this.targetProductDirectoryId = null
              this.$message({
                message: '移动成功！',
                type: 'success'
              });
              this.getDataList()

            } else {
              this.$message({
                message: '移动失败!',
                type: 'warning'
              });
            }

          })
        }

        this.$message({
            message: '请选择要移动的目标产品目录的叶子节点！',
            type: 'warning'
          });

      },
      move() {
        if (this.selectedRows.length === 0) {
          this.$message({
            message: '请选择要移动的产品！',
            type: 'warning'
          });
          return;
        }

        this.moveVisible = true
      },
      editRow(rowData) {
        if (this.editingColumn) {
          // todo
          this.$confirm('检测到未保存的内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
        } else {
          this.editingColumn = true;
          rowData.editable = true
        }

      },
      saveRow(rowData) {

        // TODO
        // this.$http({
        //     url: this.$http.adornUrl('/prm-os-srv-prod/product/productinformation/updateRowProductInformation'),
        //     method: 'post',
        //     data: this.$http.adornParams({
        //       productDirectoryId: this.targetProductDirectoryId,
        //       pIdList: pIdList
        //     })
        //   }).then((data) => {

        //     this.dataMovingLoading = false

        //     if (data && data.code === 0) {
        //       this.moveVisible = false
        //       this.targetProductDirectoryId = null
        //       this.$message({
        //         message: '移动成功！',
        //         type: 'success'
        //       });
        //       this.getDataList()

        //     } else {
        //       this.$message({
        //         message: '移动失败!',
        //         type: 'warning'
        //       });
        //     }

        //   })

        this.editingColumn = false;
        rowData.editable = false
      },
      cancelRow(rowData) {
        this.$confirm('检测到未保存的内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.editingColumn = false;
          rowData.editable = false
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });

      },

      // https://github.com/vuejs/vue/issues/5735#issuecomment-303342483
      // https://github.com/vuejs/vue/issues/5735#issuecomment-342700017
      onCellChange (id, dataIndex, values) {
        let value = values[0]
        // todo: update to database
      },
      doImport(importType) {
        this.importVisible = true;
        this.currentImport = this[importType];
      },
      reuseOk() {
        this.reuseVisible = false;
      },
      //  弹窗关闭清除上次的状态
      onCloseReuse () {
        this.reuseForm = {
          basic: [],
          doc: [],
          pic: [],
          required: [],
        }
        this.reuseDialogKey = Date.now();
      },
      switchTab({ target }) {
        const action = target.getAttribute('data-action') || target.parentElement.getAttribute('data-action');
        switch (action) {
          case 'todo':
            this.currentTab = action
            break;
          case 'publish':
            this.currentTab = action
            break;
          case 'all':
            this.currentTab = action
            break;
        }
      },
      // 查看
      view() {
        let routeName = "product/maintain/view"
        // menu/:product_menu_id/product/:product_id
        let productDirectoryId = 123;// todo
        let pid = 1;// product id
        this.$router.push({ name: routeName, query: { productDirectoryId, pid }})
      },
      // 选择复用
      reuse() {
        this.reuseVisible = true;
      },
      // 维护
      update(dataRow) {
        let routeName = "product/maintain/edit"
        // menu/:product_menu_id/product/:product_id
        let productDirectoryId = 123;// todo
        let pid = 1;// todo
        this.$router.push({ name: routeName, params: { productDirectoryId, pid }})
      },
      /**
       * 每页显示条数改变
       */
      onSizeChange (pageSize) {
        this.currentPage = 1
        this.pageSize = pageSize
        this.getDataList()
      },
      /**
       * 当前页码改变
       */
      onCurrentChange (currentPage) {
        this.currentPage = currentPage
        this.getDataList()
      },
    }
  }
</script>

<style scoped>
  .actions .el-button + .el-button {
    margin-left: 3px;
  }
  .el-table >>> th .cell {
    white-space: nowrap;
  }

  .el-table >>> .editable-data-row {
    min-height: 45px;
    height: 45px;

  }

  .el-table >>> .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .link-bottom {
    text-decoration: underline;
  }

  .reuse-form >>> .el-checkbox + .el-checkbox {
    margin-left: 0;
  }

  .reuse-form >>> .el-checkbox {
    margin-right: 30px;
  }

  .reuse-dialog >>> .el-dialog__body {
    padding-top: 10px;
  }


</style>
